import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'PlaceController.dart';
import 'PlacePlayerWidget.dart';

class PlaceStepTwoEleven extends GetView<PlaceController> {
  const PlaceStepTwoEleven({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      SizedBox(
          width: double.infinity,
          child: RichText(
              textAlign: TextAlign.center,
              text: TextSpan(
                  text: 'This test can only be done ONCE. Please choose:',
                  style: TextStyle(
                      fontSize: 24,
                      color: Color(0xff212529),
                      height: 1.2,
                      fontWeight: FontWeight.w600),
                  children: [
                    WidgetSpan(
                        alignment: PlaceholderAlignment.middle,
                        child: PlacePlayerWidget(
                            audioUrl:
                                'https://ichinsereader-prod.s3.amazonaws.com/content/media/placement/audio/21.mp3'))
                  ]))),
      SizedBox(height: 50),
      _buildSegmentWidget('Text', 'Simplified', 'Traditional'),
      SizedBox(height: 30),
      _buildSegmentWidget('Audio', 'Mandarin', 'Cantonese'),
      SizedBox(height: 40),
      MaterialButton(
          minWidth: 64,
          height: 45,
          color: Color(0xffD2E5B5),
          textColor: Color(0xff4FA397),
          child: Text('OK',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w900)),
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(6.0),
              side: BorderSide(color: Color(0xff8AAAA4))),
          onPressed: () {
            String optionKey = '';
            String simplified = 'true';
            String mandarin = 'true';
            for (String str in controller.stepTwoAnswerList) {
              optionKey += str;
            }
            if (controller.stepTwoText.value != 'Simplified')
              simplified = 'false';
            if (controller.stepTwoAudio.value != 'Mandarin') mandarin = 'false';
            Map param = {
              'optionKey': optionKey,
              'simplified': simplified,
              'mandarin': mandarin
            };
            controller.loadData(param);
          })
    ]);
  }

  Widget _buildSegmentWidget(String title, String optionOne, String optionTwo) {
    var _textStyle = const TextStyle(
        fontSize: 18,
        color: Colors.white,
        height: 1.5,
        fontWeight: FontWeight.w600);
    return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      SizedBox(
          width: 60,
          child: Text(title,
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 18,
                  color: Color(0xff212529),
                  height: 1.5,
                  fontWeight: FontWeight.w600))),
      SizedBox(width: 80),
      Obx(() {
        return ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: CupertinoSlidingSegmentedControl(
                backgroundColor: Color(0xffa5cd69),
                thumbColor: Color(0xff28a745),
                groupValue: title == 'Text'
                    ? controller.stepTwoText.value
                    : controller.stepTwoAudio.value,
                onValueChanged: (String? value) {
                  if (value == null) return;
                  title == 'Text'
                      ? controller.stepTwoText.value = value
                      : controller.stepTwoAudio.value = value;
                },
                children: {
                  optionOne: Padding(
                      padding: EdgeInsets.only(left: 15, right: 15),
                      child: Container(
                          height: 50,
                          alignment: Alignment.center,
                          child: Text(optionOne, style: _textStyle))),
                  optionTwo: Container(
                      height: 50,
                      alignment: Alignment.center,
                      child: Text(optionTwo, style: _textStyle))
                }));
      })
    ]);
  }
}
